<template>
  <div>
    <yt-card title="专家占比统计">
      <div ref="chartPie" style="height: 300px;"></div>
    </yt-card>
    <yt-card title="专家组别统计">
      <div ref="chart" style="height: 400px;"></div>
    </yt-card>
  </div>
</template>

<script type="text/ecmascript-6">
  import gql from './emergency-expert.gql'
  import { commonApi } from '@/common/api/commonApi.js'
  import echarts from 'echarts/lib/echarts'
  import 'echarts/theme/macarons'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/pie'

  export default {
    data() {
      return {
        categoryList: [],
        chartOptions: {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              name: '专家组别',
              nameLocation: 'center',
              nameGap: '30',
              boundaryGap: true,
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: '专家人数',
              type: 'value'
            }
          ],
          series: [
            {
              name: '政府',
              type: 'bar',
              data: []
            }
          ]
        },
        chartPieOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: 'top',
            data: []
          },
          series: [
            {
              name: '物资占比',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              data: [],
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              }
            }
          ]
        }
      }
    },
    methods: {
      renderCard1(category) {
        let data = this.categoryList.map(item => {
          let index = category.keys.indexOf(item.D_code)
          return {
            name: item.D_text,
            value: index > -1 ? category.values[index] : 0
          }
        })
        this.chartOptions.series[0].data = data
        this.chart.setOption(this.chartOptions)
      },
      renderCard2(pie) {
        let data = this.categoryList.map(item => {
          let index = pie.keys.indexOf(item.D_code)
          return {
            name: item.D_text,
            value: index > -1 ? pie.values[index] : 0
          }
        })
        this.chartPieOption.series[0].data = data
        this.chartPie.setOption(this.chartPieOption)
      },
      async init() {
        this.categoryList = await commonApi.dictionary('expert_group')
        const legend = this.categoryList.map(v => v.D_text)
        this.chartOptions.xAxis[0].data = legend
        this.chartPieOption.legend.data = legend
        this.fetchData()
      },
      async fetchData() {
        let { category } = await commonApi.gql(gql)
        this.renderCard1(category)
        this.renderCard2(category)
      }
    },
    activated() {
      this.chart = echarts.init(this.$refs.chart, 'macarons')
      this.chartPie = echarts.init(this.$refs.chartPie, 'macarons')
      this.init()
    }
  }
</script>
